$DIALOG_ANIMATION_DISPLACEMENT: 60px;

@keyframes dialogFadeIn {

    from {

        visibility: visible;
        opacity: 0;
        height: calc(100vh + #{$DIALOG_ANIMATION_DISPLACEMENT});
        transform: translateY(-$DIALOG_ANIMATION_DISPLACEMENT);
    }

    to {

        opacity: 1;
        height: 100vh;
        transform: translateY(0);
    }
}

@keyframes dialogFadeOut {

    from {

        opacity: 1;
        height: 100vh;
    }

    to {

        opacity: 0;
        height: calc(100vh + #{$DIALOG_ANIMATION_DISPLACEMENT});
        visibility: hidden;
    }
}

@mixin animateDialog($fadeIn) {

    $keyframes: "";

    @if ($fadeIn == true) {

        $keyframes: dialogFadeIn;
    }
    @else {
        
        $keyframes: dialogFadeOut;
    }

    animation: $keyframes 0.2s ease-out forwards;
}